<template>
  <div class="charts">
    <div class="charts__tab">
      <span
        :class="{ on: item.code === tab }"
        v-for="(item, i) in tabList"
        :key="i"
        @click="tabChange(item)"
        >{{ item.name }}</span
      >
    </div>
    <TradingView
      :symbol="pairCode"
      interval="15"
      v-if="tvRender && tab === '01'"
    ></TradingView>
    <Depth :ask-list="askList" :bid-list="bidList" :show="tab === '02'" v-else-if="tab === '02'" />
  </div>
</template>

<script>
import { addThemeListener } from "@/utils/theme";
import { debounce } from "@/utils/helpers";
import TradingView from "./TradingView";
import Depth from "./Depth";

export default {
  name: "Charts",
  components: { TradingView, Depth },
  props: {
    chainCode: {
      type: String,
      require: true,
    },
    pairCode: {
      type: String,
      require: true,
    },
    askList: {
      type: Array,
      default() {
        return [];
      },
    },
    bidList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      tvRender: true,
      tab: "01",
      tabList: [
        { code: "01", name: "TradingView" },
        { code: "02", name: "Depth" },
      ],
    };
  },
  methods: {
    initChart: debounce(function () {
      this.tvRender = false;
      this.$nextTick(() => {
        this.tvRender = true;
      });
    }, 300),
    renderChart() {
      this.$nextTick(() => {
        this.tvRender = false;
        this.$nextTick(() => {
          this.tvRender = true;
        });
      });
    },
    tabChange(tab) {
      this.tab = tab.code;
      if (this.tab === "01") {
        addThemeListener(this.renderChart);
      }
    },
  },
  watch: {
    pairCode() {
      this.initChart();
    },
  },
  mounted() {
    this.initChart();
    addThemeListener(this.renderChart);
  },
};
</script>

<style lang="scss">
.charts {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  position: relative;

  &__tab {
    position: absolute;
    right: 36px;
    top: 12px;
    display: flex;
    justify-content: flex-end;
    z-index: 2;

    span {
      cursor: pointer;
      font-size: 14px;
      font-family: "Roboto Regular";
      color: var(--color-content);
      &:first-child {
        margin-right: 10px;
      }
      &:hover,
      &.on {
        color: var(--color);
      }
    }
  }
}
</style>
